<template>
    <div>
        <el-row>
            <el-col :span="12">
                <div
                    :style="{
                        width: '100%',
                        height: clientHeight + 'px',
                        background: 'url(' + backgroundImage + ') no-repeat',
                        'background-size': '100% 100%'
                    }"
                ></div>
            </el-col>
            <el-col
                :span="12"
                :style="{
                    position: 'relative',
                    height: clientHeight + 'px'
                }"
            >
                <div class="form">
                    <div class="title">欢 迎 登 录</div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                        <el-form-item prop="account">
                            <el-input
                                v-model="ruleForm.account"
                                placeholder="请输入邮箱/手机号"
                                prefix-icon="el-icon-user"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                type="password"
                                v-model="ruleForm.password"
                                placeholder="请输入密码"
                                prefix-icon="el-icon-lock"
                                @keyup.enter.native="submitForm"
                                show-password
                            ></el-input>
                        </el-form-item>
                        <div class="login-btn">
                            <el-button type="primary" @click="submitForm"> 登 录 </el-button>
                        </div>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <div style="position: fixed; right: 20px; top: 20px">
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">下载<i class="el-icon-arrow-down el-icon--right"></i> </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="win32,x64">Windows(x64)</el-dropdown-item>
                    <el-dropdown-item command="win32,ia32">Windows(ia32)</el-dropdown-item>
                    <el-dropdown-item command="linux,x64">Linux(x64)</el-dropdown-item>
                    <el-dropdown-item command="linux,arm64">Linux(arm64)</el-dropdown-item>
                    <!-- <el-dropdown-item command="linux,loong64">Linux(loongarch64)</el-dropdown-item> -->
                    <el-dropdown-item command="darwin,x64">macOS(Intel)</el-dropdown-item>
                    <el-dropdown-item command="darwin,arm64">macOS(Apple)</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            clientHeight: 0,
            ruleForm: {
                account: '',
                password: ''
            },
            rules: {
                account: [
                    {
                        required: true,
                        message: '请输入邮箱/手机号',
                        trigger: 'blur'
                    }
                ],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            }
        }
    },
    beforeMount() {
        this.clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        this.backgroundImage = require('@/' + window.platform.backgroundImage)
    },
    created() {
        localStorage.clear()
        this.verifyLogin()
    },
    methods: {
        verifyLogin() {
            if (this.$route.query.account) {
                let params = {
                    account: this.$route.query.account,
                    noncestr: this.$route.query.noncestr,
                    timestampStr: this.$route.query.timestamp,
                    sign: this.$route.query.sign
                }
                this.$axios.post('/auth/verifyLogin', params).then(res => {
                    if (res.data.code == 200) {
                        localStorage.setItem('Authorization', res.data.data.accessToken)
                        localStorage.setItem('userId', res.data.data.userId)
                        localStorage.setItem('avatar', res.data.data.avatar)
                        localStorage.setItem('name', res.data.data.name)
                        localStorage.setItem('type', res.data.data.type)
                        localStorage.setItem('mac', Math.random().toString(36).slice(-6))
                        this.$router.push('/home')
                    } else {
                        this.$message.error('账户状态异常，请联系管理员！')
                    }
                })
            }
        },
        submitForm() {
            var params = {
                account: this.ruleForm.account,
                password: this.ruleForm.password
            }
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$axios.post('auth/login', params).then(res => {
                        if (res.data.code == 200) {
                            localStorage.setItem('Authorization', res.data.data.accessToken)
                            localStorage.setItem('userId', res.data.data.userId)
                            localStorage.setItem('avatar', res.data.data.avatar)
                            localStorage.setItem('name', res.data.data.name)
                            localStorage.setItem('type', res.data.data.type)
                            localStorage.setItem('mac', Math.random().toString(36).slice(-6))
                            this.$router.push('/home')
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }
            })
        },
        handleCommand(command) {
            let params = {
                platform: command.split(',')[0],
                arch: command.split(',')[1]
            }
            this.$axios.post('auth/download', params).then(res => {
                if (res.data.code == 200) {
                    if (res.data.data) {
                        window.open(res.data.data.url)
                    } else {
                        this.$message.error('没有相应版本')
                    }
                } else {
                    this.$message.error(res.data.message)
                }
            })
        }
    }
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-form-item__content {
    line-height: 54px;
}
::v-deep .el-input__inner {
    height: 44px;
}
.form {
    width: 100%;
    max-width: 392px;
    height: 440px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.title {
    font-size: 36px;
    font-weight: 700;
    line-height: 60px;
    color: #364a63;
    text-align: center;
    margin-bottom: 35px;
}
.login-btn button {
    width: 100%;
    height: 44px;
}
</style>
